<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	    <title>作文批改</title>
	    <link rel="stylesheet" type="text/css" href="css/aui.css">
	    <link rel="stylesheet" href="css/my.css" />
	    <link rel="stylesheet" href="css/style.css" />
	    <style>
			.aui-camera-pic{
				font-size: 3rem;
				width: 5rem;
				height: 5rem;
				background: orange;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 2rem auto .5rem;
			}
			.aui-choose-teacher{
				border: 1px solid #DDDDDD;
				border-radius: 5px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				font-size: .6rem;
				background:#eee;
			}
			.yulan {
			    position: fixed;
			    width: 100%;
			    height: 100%;
			    display: none;
			    top: 0;
			    left: 0;
			    text-align: center;
			    line-height: 100%;
			    background: #000;
			    z-index: 99999999;
			}
			#file0{
				opacity: 0;
			    position: absolute;
			    width: 5rem;
			    height: 5rem;
			}
			.yulan #img0 {
			    display: inline-block;
			    max-width: 90%;
			    line-height: 100%;
			    max-height: 90%;
			    top: 40%;
			    left: 50%;
			    -webkit-transform: translate(-50%, -40%);
			    position: absolute;
			}
			.enter {
			    position: absolute;
			    height: 10%;
			    bottom: 0;
			    left: 0;
			    width: 100%;
			   
			}
			.enter .btn-2, .enter .btn-3 {
			   border: 0;
			    outline: none;
			    color: #fff;
			    height: 100%;
			    width: 4rem;
			    font-weight: bold;
			    background: transparent;
			}
			.enter .btn-2 i, .enter .btn-3 i{
				font-weight: bold;
				font-size: 1.2rem;
			}
	    </style>
	</head>
	<body class="aui-background-white">
	    <!--header-->
	    
		<div class="aui-background-white aui-myclass-top">
			<h3 class="aui-text-three aui-font-weight aui-clear-both aui-padded-t-10 aui-padded-l-15 aui-padded-r-15" style="font-size: 1.1rem;">
				<a class="aui-pull-left aui-padded-l-0 aui-btn aui-background-transparent" href="JavaScript:history.go(-1)">
			        <span class="aui-iconfont aui-icon-left aui-font-size-20 aui-text-gray"></span>
			    </a>
				作文批改
				<span class="aui-pull-right aui-myclass-img"><img src="images/lists.png" alt="" /></span>
			</h3>
		</div>
		
		<div class="aui-content" style="margin-top: 2.5rem;">
			<ul class="tab-nav">
				<li class="tab-nav-item tab-active" style="width: 50%;">
					<a href="javascript:;">文字上传</a>
				</li>
				<li class="tab-nav-item" style="width: 50%;">
					<a href="javascript:;">拍照上传</a>
				</li>
				
			</ul>
			<div class="tab-panel aui-background-white">
				<div class="aui-padded-l-15 aui-padded-r-15 aui-padded-t-15 aui-text-gray aui-font-weight aui-font-size-14">
					选择批改老师
				</div>
				<div class="aui-padded-l-15 aui-margin-r-15 aui-margin-t-15 aui-margin-b-15  aui-arrow">
					<a href="user-teacher.html">
						<div class="aui-flex aui-padded-0 ">
							<div class="aui-user-img">
								<img src="images/user.png" alt="">
							</div>
							<div class="aui-flex-box aui-text-gray aui-text-left">
								<h2 class="aui-text-gray aui-font-size-14 aui-margin-b-5">李老师</h2>
								<p class="aui-text-gray aui-font-size-12">3年教龄</p>
							</div>						
						</div>
					</a>
				</div>
				<a href="user-chooseteacher.html">
					<div class="aui-padded-t-10 aui-margin-l-15 aui-margin-r-15 aui-padded-b-10 aui-choose-teacher aui-padded-l-10  aui-padded-l-10">					
						选择其他老师
					</div>
				</a>
				<div class="tab-panel-item tab-active">	
					<div class="aui-mytext-title aui-margin-b-5 aui-background-white aui-margin-b-5">
						<input type="text" placeholder="请输入您的作文标题"/>
					</div>
					<div class="aui-mytext-content aui-background-white aui-padded-b-10 aui-position-relative">
						<textarea name="" rows="" cols="" placeholder="请在此输入您的文章"></textarea>					
						<p class="aui-padded-l-15 aui-padded-r-15 aui-margin-t-10 aui-text-gray">2019.11.22 星期五</p>
					</div>
					<div class="aui-padded-l-15 aui-padded-r-15 aui-margin-t-15">
						<button class="aui-send-btn aui-font-size-18">
							提交批改
						</button>
					</div>
				</div>
				<div class="tab-panel-item">
					<div class="aui-position-relative aui-padded-l-15 aui-padded-r-15 aui-padded-b-10">
						<div class="aui-position-relative">
							<div class="aui-camera-pic">
								 <i class="aui-iconfont aui-icon-camera aui-text-white" style="font-size: 2.5rem;"></i>
								 <input id="file0" class="file-3" type="file" size="30" onchange="javascript:setImagePreview();" accept="image/*" capture="camera">
							</div>
							 <p class="aui-font-size-14 aui-width-one aui-text-center aui-text-gray" style="bottom: 15px;">拍照上传</p>
						</div>
						
					</div>
				</div>
			</div>
			
			
			</div>
			
		</div>
	    <div class="aui-foot-height"></div>
		<div class="yulan">
            <img src="" id="img0">
            <div class="enter">
                <button class="btn-2 aui-pull-left">
                	<i class="aui-iconfont aui-icon-close"></i>	
                </button>
                <button class="btn-3 aui-pull-right">
                	<i class="aui-iconfont aui-icon-correct"></i>
                </button>
            </div>
        </div>
	    <script src="js/jquery-1.7.2.min.js"></script>
	    <script src="js/jquery.photoClip.js"></script>
	    <script>
			$('.tab-nav-item').click(function() {
				var index = $(this).index()
				$(this).addClass('tab-active').siblings().removeClass('tab-active')
				$('.tab-panel-item').eq(index).addClass('tab-active').siblings().removeClass('tab-active')
			})
			
//			拍照
			
	    </script>
	<script type="text/javascript">
    $(function(){
        jQuery.divselect = function(divselectid,inputselectid) {
            var inputselect = $(inputselectid);
            $(divselectid+" small").click(function(){
                $("#divselect ul").toggle();
                $(".mask").show();
            });
            $(divselectid+" ul li a").click(function(){
                var txt = $(this).text();
                $(divselectid+" small").html(txt);
                var value = $(this).attr("selectid");
                inputselect.val(value);
                $(divselectid+" ul").hide();
                $(".mask").hide();
                $("#divselect small").css("color","#333")
            });
        };
        $.divselect("#divselect","#inputselect");
    });
</script>
<script type="text/javascript">
    $(function(){
        jQuery.divselectx = function(divselectxid,inputselectxid) {
            var inputselectx = $(inputselectxid);
            $(divselectxid+" small").click(function(){
                $("#divselectx ul").toggle();
                $(".mask").show();
            });
            $(divselectxid+" ul li a").click(function(){
                var txt = $(this).text();
                $(divselectxid+" small").html(txt);
                var value = $(this).attr("selectidx");
                inputselectx.val(value);
                $(divselectxid+" ul").hide();
                $(".mask").hide();
                $("#divselectx small").css("color","#333")
            });
        };
        $.divselectx("#divselectx","#inputselectx");
    });
</script>
<script type="text/javascript">
    $(function(){
        jQuery.divselecty = function(divselectyid,inputselectyid) {
            var inputselecty = $(inputselectyid);
            $(divselectyid+" small").click(function(){
                $("#divselecty ul").toggle();
                $(".mask").show();
            });
            $(divselectyid+" ul li a").click(function(){
                var txt = $(this).text();
                $(divselectyid+" small").html(txt);
                var value = $(this).attr("selectyid");
                inputselecty.val(value);
                $(divselectyid+" ul").hide();
                $(".mask").hide();
                $("#divselecty small").css("color","#333")
            });
        };
        $.divselecty("#divselecty","#inputselecty");
    });
</script>
<script type="text/javascript">
    $(function(){
       $(".mask").click(function(){
           $(".mask").hide();
           $(".all").hide();
       })
        $(".right input").blur(function () {
            if ($.trim($(this).val()) == '') {
                $(this).addClass("place").html();
            }
            else {
                $(this).removeClass("place");
            }
        })
    });
</script>
<script>
    $("#file0").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
         obUrl = objUrl;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#img0").attr("src", objUrl).show();
        }
        else{
            $("#img0").hide();
        }
    }) ;
   function qd(){
       var objUrl = getObjectURL(this.files[0]) ;
       obUrl = objUrl;
       console.log("objUrl = "+objUrl) ;
       if (objUrl) {
           $("#img0").attr("src", objUrl).show();
       }
       else{
           $("#img0").hide();
       }
   }
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>
<script type="text/javascript">
  var subUrl = "";
    $(function (){
        $(".file-3").bind('change',function(){
            subUrl = $(this).val()
            $(".yulan").show();
            $(".file-3").val("");
        });

        $(".file-3").each(function(){
            if($(this).val()==""){
                $(this).parents(".uploader").find(".filename").val("营业执照");
            }
        });
		$(".btn-3").click(function(){
			alert('222')
//		    $("#img-1").attr("src", obUrl);
		    $(".yulan").hide();
//		    $(".file-3").parents(".uploader").find(".filename").val(subUrl);
		})
        $(".btn-2").click(function(){
            $(".yulan").hide();
        })

    });
</script>
<script type="text/javascript">
    function setImagePreview() {
        var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
                picture = file_head.value;
        if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),
                !1;
        if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
                preview.style.width = "63px",
                preview.style.height = "63px",
                preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
        else {
            file_head.select(),
                    file_head.blur(),
                    img_txt = document.selection.createRange().text,
                    localImag = document.getElementById("localImag"),
                    localImag.style.width = "63px",
                    localImag.style.height = "63px";
            try {
                localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
                        localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
            } catch(f) {
                return alert("您上传的图片格式不正确，请重新选择！"),
                        !1
            }
            preview.style.display = "none",
                    document.selection.empty()
        }
        return document.getElementById("DivUp").style.display = "block",
                !0
    }
   
    
</script>
	</body>

</html>
